<template>
  <view class="head">
    <u-navbar leftIconSize="0" :placeholder="true" title="购物车"></u-navbar>
  </view>
  <view v-if="shoplist.length || 0">
    <view class="listbox">
      <!-- 多选框盒子 -->
      <u-checkbox-group shape="circle" activeColor="#E11768">
        <view
          class="listcontent"
          v-for="(item, index) in shoplist"
          :key="index"
          @touchstart="start"
          @touchend="end($event, item, index)"
          :data-id="index"
          :class="[{ active: item.del }]"
        >
          <view class="contentbox">
            <!-- 多选框 -->
            <u-checkbox
              @change="checkboxChange(index)"
              :checked="item.checked"
            />
            <img :src="item.image" alt="" class="img" />
            <view class="titlebox">
              <view class="title overflow2">{{ item.title }}</view>
              <view class="edition"
                ><span>{{ item.edition }}</span></view
              >
              <view class="bottom">
                <view class="left">￥{{ item.Price }}</view>
                <view class="right">
                  <img
                    src="http://uniqn.zmycode.top/%E5%87%8F.png"
                    alt=""
                    class="img"
                    @click="reduction(index)"
                  />
                  <view class="num">{{ item.num }}</view>
                  <img
                    src="http://uniqn.zmycode.top/%E5%8A%A0%E5%8F%B7.png"
                    alt=""
                    class="img"
                    @click="add(index)"
                  />
                </view>
              </view>
            </view>
          </view>
          <div class="abs-del" @click="del(index)">
            <img
              src="http://uniqn.zmycode.top/%E5%88%A0%E9%99%A4.png"
              alt=""
              class="img"
            />
          </div>
        </view>
      </u-checkbox-group>
      <!-- 结算 -->
      <view class="totalbottom">
        <view class="left" @click="radiochange">
          <view class="radio">
            <img
              src="http://uniqn.zmycode.top/%E5%AF%B9%E5%8F%B72.png"
              alt=""
              class="img"
              v-if="radionum"
            />
          </view>

          <view class="radiotitle">全选</view>
        </view>
        <view class="right">
          <view>
            合计:<text>￥{{ totalnum }}</text></view
          >
          <view class="totaltitle">计算</view></view
        >
      </view>
    </view>
  </view>
  <!-- 无商品图片 -->
  <view v-else>
    <view class="else"
      ><img
        src="http://uniqn.zmycode.top/%E8%B4%AD%E7%89%A9.png"
        alt=""
        class="img"
    /></view>
    <view class="elsetitle font4">空空如也&nbsp;<span>随便逛逛</span></view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { shoplist } from "./shoppingcart.js";
import { useStore } from "vuex";
import like from "@/compents/like/like.vue";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
const store = useStore();
//总价
const totalnum = ref(0);
const radionum = ref(false);
onReady(() => {
  total();
});
//点击单选框
const radiochange = (index) => {
  radionum.value = !radionum.value;
  if (radionum.value) {
    for (let j = 0; j < shoplist.value.length; j++) {
      shoplist.value[j].checked = true;
    }
    total();
  } else {
    for (let j = 0; j < shoplist.value.length; j++) {
      shoplist.value[j].checked = false;
    }
    total();
  }
};
//多选框改变值
const checkboxChange = (index) => {
  shoplist.value[index].checked = !shoplist.value[index].checked;
  total();
  //更改全选
  const checkboxtruenum = ref(0);
  for (let j = 0; j < shoplist.value.length; j++) {
    if (shoplist.value[j].checked) {
      checkboxtruenum.value++;
    }
  }
  if (checkboxtruenum.value == shoplist.value.length) {
    radionum.value = true;
  } else {
    radionum.value = false;
  }
};
//数量加
const add = (index) => {
  shoplist.value[index].num++;
  total();
};
//数量减
const reduction = (index) => {
  shoplist.value[index].num--;
  if (shoplist.value[index].num == -1) {
    shoplist.value[index].num = 0;
  }
  total();
};
//计算总价
const total = () => {
  totalnum.value = 0;
  for (let i = 0; i < shoplist.value.length; i++) {
    if (shoplist.value[i].checked) {
      totalnum.value =
        totalnum.value + shoplist.value[i].num * shoplist.value[i].Price;
    }
  }
  // console.log(totalnum.value);
};

//触摸事件
let clientX = 0;
const start = (e) => {
  clientX = e["changedTouches"][0].clientX;
};
const end = function ($event, item, index) {
  // console.log($event);
  const { clientX: endClienx } = $event["changedTouches"][0];
  if (clientX > endClienx) {
    item.del = true;
  }
  if (endClienx > clientX) {
    item.del = false;
  }
};
//删除
const del = (index) => {
  console.log(index);
  shoplist.value.splice(index, 1);
  total();
};
onLoad(() => {
  store.dispatch("cartlist");
  // store.
  shoplist.value = store.state.cartlist;
});
</script>

<style lang="scss" scoped>
.else {
  position: relative;
  height: 500rpx;
  .img {
    width: 200rpx;
    height: 200rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
.elsetitle {
  width: 100%;
  text-align: center;
  color: #d4d5db;
  span {
    color: #f9436a;
  }
}
.listbox {
  padding: 10rpx 0;
  background-color: #fff;
  overflow: hidden;

  .listcontent {
    // border: 1px solid red;
    transition: all 0.3s ease-in;
    position: relative;
    .abs-del {
      position: absolute;
      right: -120rpx;
      bottom: 0;
      background-color: red;
      color: green;
      width: 120rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 40rpx;
        height: 40rpx;
      }
    }
    &.active {
      transform: translateX(-120rpx);
    }
    .contentbox {
      // border: 1px solid red;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 10rpx 20rpx;
      position: relative;
      width: calc(100vw - 40rpx);
      margin: 0 auto;
      .img {
        width: 150rpx;
        height: 150rpx;
        border-radius: 8rpx;
      }
      .titlebox {
        // width: 100%;
        position: absolute;

        right: 20rpx;
        width: 520rpx;
        color: #535353;
        font-size: 24rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 90%;
        .edition {
          span {
            color: #a4a4a4;
            background-color: #d4d5db;
            padding: 4rpx;
            font-size: 20rpx;
            border-radius: 4rpx;
          }
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          .left {
            font-size: 28rpx;
          }
          .right {
            display: flex;
            justify-content: center;
            align-items: center;
            .num {
              margin: 0 20rpx;
            }
            .img {
              width: 20rpx;
              height: 20rpx;
              background-color: #cfcfcf;
              padding: 10rpx;
            }
          }
        }
      }
    }
  }
}
.totalbottom {
  width: 100%;
  position: fixed;
  bottom: var(--window-bottom);
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  .left {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 28rpx;
    color: #535353;
    .radio {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: #f9436a 1px solid;
      position: relative;
      box-sizing: border-box;
      margin-right: 10rpx;
      .img {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
  .right {
    display: flex;
    justify-content: right;
    align-items: center;
    text {
      font-weight: 600;
    }
    .totaltitle {
      background-color: #f9436a;
      color: #fff;
      padding: 10rpx 20rpx;
      font-size: 26rpx;
      margin-left: 20rpx;
      border-radius: 40rpx;
    }
  }
}
</style>
